<!--
 * @Author: 程宗超 qq_43187601@noreply.gitcode.com
 * @Date: 2025-08-02 09:44:06
 * @LastEditors: 程宗超 qq_43187601@noreply.gitcode.com
 * @LastEditTime: 2025-08-02 13:33:28
 * @FilePath: \nurse\src\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <view>
    <view class="top-bg">
      <!-- <u-image :src="$sc.loadImg('indexbg.png')" width="100%" height="707rpx" class="absolute left-0 top-0">
      </u-image> -->
      <view
        class="bg-white rd-tl-30rpx rd-tr-30rpx pt-20 px-40 box-border pb-50">
        <up-grid :border="false" @click="click" :col="5">
          <up-grid-item v-for="(item, index) in menuList" :key="index">
            <u-image
              :src="$sc.loadImg(`icon${index + 1}.png`)"
              width="90rpx"
              height="90rpx"></u-image>
            <text class="color-#666 text-26">{{ item.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <view class="bg-white px-30 mt-100 pt-40">
      <view class="flex items-baseline mb-40">
        <view class="color-#333 text-36"> 护士上门护理 </view>
        <view class="ml-20 text-24 color-#999"> 一站式到家服务 </view>
      </view>
      <z-paging
        :fixed="false"
        height="500rpx"
        :pagingStyle="{ background: '#ffffff', borderRadius: '10rpx' }"
        :auto="true"
        @query="loadData">
        <view
          class=""
          v-for="item in 10"
          :key="item"
          @click="$u.route('/pagesA/service/index')">
          <view class="flex mb-40">
            <u-image
              :src="$sc.loadImg('banner.png')"
              width="180rpx"
              height="180rpx"></u-image>
            <view class="ml-30 flex-1">
              <view class="color-#333 text-30"> 上门打针 </view>
              <view class="color-#666 text-24 my-12">
                肌肉注射 | 皮下注射
              </view>
              <view class="theme-color text-24 border-green">
                减脂针 | 升白针 | 肿瘤药
              </view>
              <view class="flex justify-between text-24 mt-16">
                <view class="color-#FC4931"> ￥180 </view>
                <view class="flex">
                  <view class="color-#666"> 寿光市洛城街道医院 </view>
                  <view class="color-#999 ml-15"> 3.2km </view>
                </view>
              </view>
            </view>
          </view>
          <view class="mb-40">
            <up-gap height="1" bgColor="#e6e6e6"></up-gap>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script setup>
const menuList = [
  {
    title: "打针采血",
  },
  {
    title: "中医护理",
  },
  {
    title: "美肤护理",
  },
  {
    title: "输液护理",
  },
  {
    title: "到家快检",
  },
  {
    title: "卧床护理",
  },
  {
    title: "母婴照护",
  },
  {
    title: "换药拆线",
  },
  {
    title: "居家康复",
  },
  {
    title: "就医陪诊",
  },
];
</script>

<style lang="scss" scoped>
.top-bg {
  background: url("https://file.sdbly.cn/nurse/static/indexbg.png") no-repeat;
  background-size: 100% 707rpx;
  width: 100%;
  height: 707rpx;
  padding-top: 460rpx;
  box-sizing: border-box;
}
.border-green {
  border-radius: 5px;
  border: 1px solid #4ac18c;
  display: inline-block;
  padding: 1rpx 12rpx;
}
</style>
